<template>
    <div>

        <div style="border: 1px solid #ccc;">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor :style="style" v-model="valueHtml" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="handleCreated" />
        </div>

    </div>
</template>
<script setup lang='ts'>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { ref, shallowRef} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
const props= withDefaults(defineProps<{
    height: string | number
}>(), {
    height: '300px'
})

const style={
    overflowY:'hidden',
    height:props.height+'px'
}



const editorRef = shallowRef();
const toolbarConfig = {}
type InsertFnType = (url: string, alt: string, href: string) => void
const editorConfig: any = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            fieldName: 'file',
            server: import.meta.env.VITE_BASE_URL + '/upload/add',
            headers: {
                Authorization: sessionStorage.getItem('token'),
            },
            customInsert(res: any, insertFn: InsertFnType) {
                if (res.errCode === 10000) {

                    let url = import.meta.env.VITE_IMG_URL + res.data;
                      insertFn(url, "", "");
                }
             
            },
        }
    }
}

const mode = 'default';

const valueHtml = defineModel<string>();

 

//  watchEffect(() => {
//     valueHtml.value = value.value || "";
// })

const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
 
 
</script>
<style scoped lang='less'></style>